<template>
  <div id="main-content-list">
    <el-form ref="form" label-width="80px" inline>
      <el-form-item v-for="(item,index) of queryCondition" :key="index" :label="item.name">
        <el-input clearable v-if="item.type == 'input'" v-model="query[item.key]"/>
        <union-select :init-value="item.initValue" :chose-key="item.key" @choseItem="choseItem"
                      v-if="item.type == 'union-select'" :url="item.url" :permission="item.permission"/>
        <el-select clearable v-if="item.type == 'select'" v-model="query[item.key]">
          <el-option v-for="(op,index) of item.options" :key="index" :label="op.name" :value="op.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table v-if="!isTreeTable " border :data="tableContent" height="500" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column width="80" label="序号" align="center">
        <template slot-scope="scope">
          {{scope.$index + indexStart}}
        </template>
      </el-table-column>
      <el-table-column min-width="120" align="center" v-for="(item,index) of tableHead" :key="index" :label="item.name"
                       :property="item.key" show-overflow-tooltip="">
        <template slot-scope="scope">
          <el-button v-if="scope.row.icon !='' && item.type=='icon'" :width="item.width" disabled type="primary"
                     :icon="scope.row.icon"
                     circle></el-button>
          {{item.type=='icon' ? '': scope.row[item.key]}}
        </template>

      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="240" align="center">
        <template slot-scope="scope">

          <link-group :data="scope.row" :buttons="buttons.children" @handleClick="handleClick"></link-group>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-if="!isTreeTable" :total="pageConfig.total" :page="pageConfig.page" :limit="pageConfig.limit"
                @changePage="changePage"></pagination>
    <el-table v-if="isTreeTable && tableShow" height="500"
              :data="tableContent"
              style="width: 100%;margin-bottom: 20px;"
              :tree-props="{hasChildren: 'hasChildren'}" row-key="id" lazy :load="load" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">

      <el-table-column min-width="120" v-for="(item,index) of tableHead" :width="item.width" :key="index" :align="index == 0?'':'center'"
                       :prop="item.key" :label="item.name" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button v-if="scope.row.icon != null && scope.row.icon !=''  && item.type=='icon'" aria-readonly type="text" :icon="scope.row.icon"
                     circle></el-button>
          {{item.type=='icon' ? '': scope.row[item.key]}}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="280"
                       align="center"
                       >
        <template slot-scope="scope">
          <link-group :data="scope.row" :buttons="buttons.children" @handleClick="handleClick"></link-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import pagination from '../common/pagination'
  import unionSelect from '../common/union-select'
  import btDelete from '../common/bt-delete'
  import linkGroup from '../common/link-group'

  export default {
    components: {
      pagination,
      unionSelect,
      btDelete,
      linkGroup
    },
    name: "main-content-list",
    data() {
      return {
        tableContent: [],
        tableShow: true,
        query: {},
        pageConfig: {
          page: 1,
          limit: 5,
          total: 0,
        },
        queryFlag: true,
        indexStart: 1
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      handleClick(content){
        if (content.index == 1){
          this.handleDelete(this.buttons.children[content.index],content.data)
        }else if (content.index == 2){
          this.edit(content.data)
        }else if (content.index == 3){
          this.addLowLevel(content.data)
        }
      },
      addLowLevel(content) {
        this.$emit('handleAddLowLevel', content)
      },
      choseItem(content, key) {
        if (this.common.isNotEmpty(key)) {
          this.query[key] = content.id
        } else {
          this.query.parentId = content.id
        }
      },
      edit(content) {
        this.$emit('handleEdit', content)
      },
      handleDelete(button, content) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableShow = false
          this.common.request({
            url: button.target,
            param: content,
            permission: button.id,
            success: res => {
              if (res.code == 1) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getList()
              }
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      load(tree, treeNode, resolve) {
        this.common.request({
          url: this.buttons.children[0].target,
          param: {
            parentId: tree.id,
          },
          permission:this.buttons.children[0].id,
          loading: false,
          success: res => {
            if (res.code == 1) {
              if (this.common.isEmpty(res.data.rows)) {
                resolve([])
              } else {
                resolve(res.data.rows)
              }
            }
          }
        })
      },
      initData() {
        for (let i = 0; i < this.queryCondition.length; i++) {
          let condition = this.queryCondition[i]
          this.$set(this.query, condition.key, '')
        }
      },
      changePage(page, limit) {
        if (this.pageConfig.limit == limit){
          this.pageConfig.page = page
        } else{
          this.pageConfig.limit = limit
          this.pageConfig.page = 1
        }
      },
      paramsIsEmpty(param) {
        let flag = true
        for (let key in param) {
          if (this.common.isNotEmpty(param[key]) && key != 'parentId') {
            flag = false
          }
        }
        return flag
      },
      getList() {
        let param = this.query
        if (!this.isTreeTable) {
          this.$set(param, 'limit', this.pageConfig.limit)
          this.$set(param, 'page', this.pageConfig.page)
        } else {
          if (this.paramsIsEmpty(param)) {
            if (this.common.isEmpty(param.parentId)) {
              param.parentId = '0'
            }
          } else {
            if (param.parentId == '0') {
              param.parentId = ''
            }
          }
        }
        this.common.request({
          url: this.buttons.children[0].target,
          param: param,
          permission: this.buttons.children[0].id,
          success: res => {
            if (res.code == 1) {
              this.tableShow = true
              this.pageConfig.total = res.data.total
              this.tableContent = []
              for (let i = 0; i < res.data.rows.length; i++) {
                let item = res.data.rows[i]
                this.$set(this.tableContent, i, item)
              }
              this.queryFlag = true
            }
          }
        })

      }
    },
    watch: {
      query: {
        handler() {
          if (this.queryFlag) {
            this.queryFlag = false
            this.pageConfig.page = 1
            setTimeout(() => {
              this.getList()
            }, 500)
          }
        },
        deep: true
      },
      pageConfig: {
        handler(newVal, oldVal) {
          if (this.queryFlag) {
            this.queryFlag = false
            this.indexStart = (this.pageConfig.page - 1) * this.pageConfig.limit + 1
            this.getList()
          }
          setTimeout(() => {
            this.queryFlag = true
          }, 1000)
        },
        deep: true
      }
    },
    props: {
      tableHead: {
        type: Array
      },
      url: {
        type: String
      },
      queryCondition: {
        type: Array
      },
      isTreeTable: {
        type: Boolean,
        default() {
          return false
        }
      },
      buttons: {
        type: Object
      }
    }
  }
</script>

<style scoped>

</style>
